import React, { PropTypes, Component } from 'react'
import fetch from 'isomorphic-fetch'
import { Link } from 'react-router'

import Table from './Table'
import NavLink from './NavLink'
import style from './PointM.css'
import {myAjax,ROOTURL} from './../publicAPI/publicAPI'

class Coupon extends Component {

    constructor(props, context) {
        super(props, context)
        console.log("初始化")
        this.state = {
           Recorddata:[],
        };// 初始化状态
        this.page=1;
        this.start=0;
        this.getlist.bind(this);
    }

    componentWillMount() {
        console.log("将安装")
        this.getlist();
    }

    componentDidMount() {
        console.log("安装成功")
    }
    getlist(){
        var id=this.props.params.id;
        var Geturl=ROOTURL+'coupon/coupon/search.api'
        var _this=this;
 
         fetch(Geturl, {
            method: 'post',
            // mode : 'no-cors',
            // headers: { 
            //   "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" 
            // }, 
            body:JSON.stringify({ 
                 "where":{},
              "order":
                [           // ORDER BY  
                    ["id", "desc"],    // id ASC,
         
                ],
                "limit":10
            
                })
        }).then(res=> {
            if (res.ok) {
                res.json().then(data=> { 
                    console.log(data);
                   _this.setState({
                  Recorddata:data,
                });
            })
            }
        })
    }

   handlePageClick(e) { //1为下一页，2为上一页
        let _buttonValue = e.target.value;
        let id=this.props.params.id;
        let next=document.getElementsByClassName("next")[0];
        let prev=document.getElementsByClassName("prev")[0];
        let _this=this;     
        if (_buttonValue == 1) {
          
          this.start=this.start+10;
          this.page++;
          prev.style.display="block";

        } else {
          this.start=this.start-10;
          this.page--;
          next.style.display="block";
        }
        console.log(this.page);
         
         let params={
             "where":{
             
              "creditAccount":{
                       "id":[
                             ["eq",id]
                       ]
               },

                "dd":[
                    ["eq",false]

                ],

            },
                 "order":
                [           // ORDER BY  
                        ["id", "DESC"],    
             
                ],
                "start":this.start,
                "limit":10
                
        }
        fetch(ROOTURL+'credit/record/search.api',{
                method: 'post',
                headers: {
                    "Content-type": "application/json; charset=UTF-8"
                },
        
                body:JSON.stringify(params)
        }).then(response=>{return response.json()})
        .then(data=>{
            if(data.length<10&&this.page!=1)
             next.style.display="none";
            this.setState({
            Recorddata:data
            });
        }
            //console.log(data);
        )
        if(this.page==1){
       
            prev.style.display="none";
        }             
    }

    tHead() {
        var data = [
            {name: "id"},
            {name: "微信名称"},
            {name: "优惠券数量"},
            {name: "详细记录"}
        ];
        const _headArr = [];
        const _width = {
            "0": "25%",
            "1": "25%",
            "2": "25%",
            "3": "25%",
          
        };
        //_headArr.push(<th style={{width:'5%'}} role="1" key='' onClick={(e) => this.handleSelect(e)}></th>)
        _headArr.push(data.map((item, index) => <th style={{width: _width[index]}} role="1"
                                                    key={index}>{item.name}</th>));
        return _headArr;
    }

    tBody() {
        var _data=this.state.Recorddata;
      

        return _data.map(item => <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.wechatid}</td>
            <td>{item.phone}</td>
           
            
            <td>
                <span><NavLink to={`/Coupon/CouponEditor/${item.id}`} className="rbtn green">查看</NavLink></span>
                <span style={{marginLeft: "15px"}}><a className="rbtn red"
                                                      onClick={()=>this.handleDelete(item.id)}>删除</a></span>
            </td>
        </tr>)
    }

    render() {
        console.log("理发师管理" + "渲染" + this.state.page)
        return (
            <div className="right-wapper">
           
               <div className="rt-wrap">
                    <h3 className="catagory">
                        <span className="cata-title">优惠券管理</span>
                         <button className="next" value="1" onClick={(e) => this.handlePageClick(e)}></button>
                        <button style={{display:'none'}} className="prev" value="2" onClick={(e) => this.handlePageClick(e)}></button>
                    </h3>
                    <Table tHead={this.tHead.bind(this)()} tBody={this.tBody.bind(this)()}/>
                </div>
                { this.state.delete ?
                    <div id={style["msgDialog"]}>
                        <div className={style["msgDialog_div"]}><h3 id={style["msgDialog_title"]}>删除提示？</h3><p id={style["msgDialog_content"]}>
                            确认删除？</p>
                            <div className={style["msgDialog_button"]}>
                                <button id={style["msgDialog_yes"]}>确定</button>
                                <button id={style["msgDialog_no"]}
                                        onClick={()=>this.setState({delete: !this.state.delete})}>
                                    取消
                                </button>
                            </div>
                        </div>
                    </div> : null}
            </div>

        )
    }
}

export default Coupon
